
//  页面侧边栏组件

<template>
  <el-aside width="90px">
    <el-menu
      default-active="$route.path"
      class="el-menu-vertical-demo"
      text-color="#fff"
      active-text-color="#fff"
      background-color="#2e334f"
      router
      ref="leftNavigation"
    >
      <template v-for="route in $router.options.routes">
        <!-- 注意：这里就是leftNavState状态作用之处，当该值与router的根路由的name相等时加载相应菜单组 -->
        <template v-if="route.name === $store.state.leftNavState">
          <template v-for="(item,index) in route.children">
             <el-menu-item  v-if="item.leaf" :index="item.path" :key="item.path" :class="$route.path===item.path?'is-active':'is-not-active'" >
              <i :class="item.icon"></i>
              <span slot="title">{{item.name}}</span>
            </el-menu-item>
            <el-submenu v-else :index="index+''" :key="index+''">
              <template slot="title">
                <i :class="item.icon"></i>
                <span slot="title">{{item.name}}</span>
              </template>
              <el-menu-item
                v-for="term in item.children"
                :key="term.path"
                :index="term.path"
                :class="$route.path===term.path?'is-active':'is-not-active'"
              >
                <i :class="term.icon"></i>
                <span slot="title">{{term.name}}</span>
              </el-menu-item>
            </el-submenu>
           
          </template>
        </template>
      </template>
      


    </el-menu>
  </el-aside>
</template>

<script>
export default {
  data() {
    return {};
  },
  created() {
    this.defaultLeftNavOpened();
  },
  mounted() {
    
  },

  methods: {
    // 左侧导航栏根据当前路径默认打开子菜单（如果当前是二级菜单，则父级子菜单默认打开）
    defaultLeftNavOpened() {
      let cur_path = this.$route.path; //获取当前路由
      let routers = this.$router.options.routes; // 获取路由对象
      let subMenuIndex = "",
        needOpenSubmenu = false;
      for (let i = 0; i < routers.length; i++) {
        let children = routers[i].children;
        if (children) {
          for (let j = 0; j < children.length; j++) {
            if (children[j].path === cur_path) {

              break;
            }
            // 如果该菜单下还有子菜单
            if (children[j].children && !children[j].leaf) {
              let grandChildren = children[j].children;
              for (let z = 0; z < grandChildren.length; z++) {
                if (grandChildren[z].path === cur_path) {
                  subMenuIndex = j;
                  needOpenSubmenu = true;
                  break;
                }
              }
            }
          }
        }
      }
      if (this.$refs["leftNavigation"] && needOpenSubmenu) {
        this.$refs["leftNavigation"].open(subMenuIndex); // 打开子菜单
      }
    }
  },

  watch: {}
};
</script>

<style scoped>
.el-aside {
  background-color: #2e334f;
  /* background: -ms-linear-gradient(top, #2e334f, #4d3f54);
  background: -webkit-linear-gradient(top, #2e334f, #4d3f54);
  background: -moz-linear-gradient(top, #2e334f, #4d3f54); */
  color: #fff;
  text-align: center;
  line-height: 200px;
}
.el-menu {
  background-color: transparent !important;
  border: none;
  margin-top: 20px;
}
.el-menu--horizontal > .el-menu-item:hover {
  color: #409eff !important;
}
.el-menu-item [class^="el-icon-"] {
  margin: 0;
  width: auto;
  padding: 10px;
  font-size: 26px;
  margin-bottom: 8px;
}
.el-menu-item {
  font-size: 15px;
  display: flex;
  height: auto;
  line-height: 1;
  flex-direction: column;
  align-items: center;
  padding: 10px 0 !important;
}
.el-menu-item.is-active i {
  background: #409eff;
  border-radius: 4px;
}
.el-menu-item.is-not-active i{
 background: transparent!important;
}
</style>
